// pages/myFriend/myFriend.js
const app = getApp()
var url = require('../../utils/url.js');
var token;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mycode: ""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    wx.showLoading({
      title: '生成小程序码...',
    })
    wx.getStorage({
      key: 'token',
      success: function (res) {
        token = res.data
        wx.request({
          url: url.URl + 'my/share',
          data: {},
          method: 'GET',
          header: {
            'Authorization': token
          },
          success: function (res) {
            var msg = res.data.msg;
            console.log(res.data.data)
            if (res.data.code == 200) {
              that.setData({
                mycode: res.data.data
              })
              var mycode = res.data.data;
              var context = wx.createCanvasContext('secondCanvas')
              wx.getImageInfo({
                src: mycode,
                success: (res) => {
                  context.drawImage("../../images/shareBg.png", 0, 0, 315, 485);
                  context.fillStyle = "#FFF";
                  context.fillRect(103, 180, 125, 125);
                  context.drawImage(res.path, 105, 182, 120, 120);
                  wx.getStorage({
                    key: 'userinfo',
                    success: function(res1) {
                      var userinfo=res1.data;
                      wx.getImageInfo({
                        src: userinfo.avatar,
                        success: (res2) => {
                          console.log(res2.path)
                          // context.drawImage(res2.path, 52, 99, 45, 45);
                          var avatarurl_width = 45;    //绘制的头像宽度
                          var avatarurl_heigth = 45;   //绘制的头像高度
                          var avatarurl_x = 52;   //绘制的头像在画布上的位置
                          var avatarurl_y = 99;   //绘制的头像在画布上的位置
                          context.save();

                          context.beginPath(); //开始绘制
                          //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
                          context.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
                          context.fillStyle = "#DD2626"; 

                          context.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因

                          context.drawImage(res2.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片

                          context.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制

                          context.setFontSize(16)
                          context.setFillStyle("#fff")
                          context.fillText(userinfo.nickname, 115, 120)
                          context.stroke()
                          context.draw()
                          wx.hideLoading()

                        }
                      })
                    },
                  })
                  
                }
              })

            } else {
              wx.showToast({
                title: msg,
                icon: 'none',
                duration: 2000
              })
            }
          }
        })
      },
    })

  },
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  saveImage: function (e) {
    wx.canvasToTempFilePath({
      canvasId: 'secondCanvas',
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(result) {
            wx.showToast({
              title: '图片保存成功',
              icon: 'success',
              duration: 2000
            })
          }
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})